body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,img,form,applet,fieldset,legend,button,input,textarea,th,table,tr,td{margin:0;padding:0;border:none;}

/* bady */
body{font-family:"微软雅黑";font-size:12px;color:#333;position:relative;background:transparent;overflow: hidden;}
body,div,fieldset,form,h1,h2,h3,h4,h5,h6,html,p{-webkit-text-size-adjust:none}
input::-ms-clear{display:none;}/*清楚文本框X*/
html{height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
input,select,textarea{outline:none;cursor:pointer;}

/* img */
img{padding:0;margin:0;vertical-align:top;border:none}
i{font-style:normal;}
body{
    overflow:hidden;
    background: transparent;
    font-family: '微软雅黑';
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 2px 5px 2px rgba(0,0,0,.3);
}
/* float */
.fl{float:left!important;}
.fr{float:right!important;}
.auto{margin:0 auto;}
.block{display:block!important;}
.none{display:none;}
.red{color:#ea4848!important;}
.blue{color:#0034fa!important;}
.mins{height:0px!important;}
.green{color:#008040!important;}

input:focus {
    outline:none;
}
input,button,a {
    outline:0 none !important; blr:expression(this.onFocus=this.blur());
}
/* div */
li,ul{list-style:none;outside:none;}
.clear{clear:both;height:0;width:100%;}
a,b,i,span,input,select{-webkit-transition:all 0.5s;-ms-transition:all 0.5s;font-family:"微软雅黑";}

/* font */
a{color:#ffffff;text-decoration:none;-webkit-transition:all 0.5s;}
a:hover,a:active,a:focus{text-decoration:none;}

*{
    box-sizing: border-box;
}
video{
    display: block;
}
.window{
    position: absolute;
    top: 0;
    bottom: 0px;
    right: 0px;
    left: 0px;
    height: inherit;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 2px 6px 2px rgba(0,0,0,.3);
}
.tray{
    filter: blur(5px);
    color: #fff;
    -webkit-app-region: drag;
    background: #111;
    height: 38px;
    position: relative;
}
.tray h1{
    position: absolute;
    height: 100%;
    margin: 0;
    font-weight: 100;
    font-size: 14px;
    line-height: 37px;
    padding-left: 20px;
}
.tray .btns{
    display: flex;
    justify-content: flex-end;
}
.tray .btns *{
    -webkit-app-region: no-drag;
    height: 38px;
    width: 48px;
    flex-direction: column;
    background-repeat: no-repeat;
    background-position: center;
}
.tray .btns *:hover{
    background-color: rgba(0,0,0,.2);
}
#quit{
    cursor: pointer;
    background-position: 17px center;
    background-image: url(../../imgs/video/cloase.png);
}
#quit:hover{
    background-color: #e81123;
}
#minimize{
    cursor: pointer;
    background-image: url(../../imgs/video/minimize.png);
}

.call .chat{
    -webkit-filter: blur(10px);
    filter: blur(10px);
}
.video_chat{
    position: absolute;
    top: 33px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}
.vidio_dialog{
    position: absolute;
    top: 0;
    bottom: 0px;
    right: 0px;
    left: 0px;
    padding: 0px;
    padding-bottom: 0;
}
#remote_video{
    position: absolute;
    top: 0;
    bottom: 0px;
    right: 0px;
    left: 0px;
    background:#333;
}
#remote_video video{
    width: 100%;
    height: 100%;
}
#local_video{
    background: #414f4f;
    position: absolute;
    width: 80px;
    height: 60px;
    bottom: 60px;
    right: 0px;
}
.video_chat .btns{
    background:transparent;
    background-color:rgba(0,0,0,0.3);
    position: absolute;
    height: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    height: 60px;
}
.video_chat .btns > div{
    height: 40px;
    width: 40px;
    border-radius: 25px;
    margin: 0 10px;
    background-size: 24px auto;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 25px;
    background-color: #EEE;
    cursor: pointer;
}
.video_chat .btns > div:hover{
    background-color: rgba(255,0,0,.5);
}
.call_btn{background-image: url(../../imgs/video/call.png)}
.call_btn.active{background-image: url(../../imgs/video/call_end.png)}
.video_btn{ background-image: url(../../imgs/video/video.png)}
.video_btn.active{ background-image: url(../../imgs/video/video_off.png)}
.mic_btn{ background-image: url(../../imgs/video/mic.png)}
.mic_btn.active{ background-image: url(../../imgs/video/mic_off.png)}

#call{
    display: none;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.7);
    position: absolute;
    top:0;
    right:0;
}
.call #call{
    display: block;
}
#call .name{
    margin-top: 80px;
    font-size: 24px;
    text-shadow: 0px 1px 2px rgba(0,0,0,.5);
    color: #fff;
    font-weight: 500;
    text-align: center;
}
#call .btns{
    display: flex;
    justify-content: center;
    align-items: center;
}
#call .btns > div{
    height: 50px;
    width: 50px;
    border-radius: 25px;
    background-color: #EEE;
    cursor: pointer;
    margin: 30px 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px auto;
}

#call .btns > div.min{
    height: 30px;
    width: 30px;
    background-size: 16px auto;
}
#call .btns > .call_btn{
    background-color: #d52b3b;
    background-image: url(../../imgs/video/cal_end_w.png);
}
/*滚动条宽度*/
::-webkit-scrollbar {
    width: 6px;

}

/* 轨道样式 */
::-webkit-scrollbar-track {

}

/* Handle样式 */
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: rgba(0,0,0,0.2);
}

/*当前窗口未激活的情况下*/
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0,0,0,0.1);
}

/*hover到滚动条上*/
::-webkit-scrollbar-thumb:vertical:hover{
    background-color: rgba(0,0,0,0.3);
}
/*滚动条按下*/
::-webkit-scrollbar-thumb:vertical:active{
    background-color: rgba(0,0,0,0.7);
}